<template>
	<!-- 这是电话回访页面 -->
	<view>
		<u-navbar title="回访详情" @rightClick="rightClick" :autoBack="true" placeholder leftIconSize="22px"
			rightText="历史回访">
		</u-navbar>
		<view class="indexbody">
			<view class="indexbody_title">
				<view>{{info.name}}</view>
			</view>
			<view class="indexbody_content">
				<text>{{info.sex | sexType}}</text>
				<text>{{info.age}}岁</text>
				<text>{{info.phone}}</text>
			</view>
			<view class="indexbody_address">
				<view class="">
					<image src="../../static/index/address.png" mode=""></image>
				</view>
				<view class="">
					<text>{{info.city}}{{info.detail}}</text>
				</view>
			</view>
			<view class="indexbody_phone">
				<text>{{info.phone}}</text>
				<u-icon name="phone-fill" color="#2979ff" size="28"></u-icon>
			</view>
		</view>
		<!-- 最新回访信息 -->
		<view class="visitor">
			<text>最新回访信息</text>
		</view>
		<view class="VisitorInformation" v-if="">
			<view class="VisitorInformation_list">
				<text>负责人</text>
				<text>{{info.username}}</text>
			</view>
			<view class="VisitorInformation_list">
				<text>回访方式</text>
				<text>{{info.type | visitType}}</text>
			</view>
			<view class="VisitorInformation_list">
				<text>回访时间</text>
				<text>1949-10-01 15:00:00</text>
			</view>
			<view class="VisitorInformation_list">
				<text>居住环境</text>
				<text>{{info.live}}</text>
			</view>
			<view class="VisitorInformation_list">
				<text>个人卫生</text>
				<text>{{info.hygiene}}</text>
			</view>
			<view class="VisitorInformation_list">
				<text>身体状况</text>
				<text>{{info.body}}</text>
			</view>
			<view class="VisitorInformation_list">
				<view class="certificatee">
					<text>需求</text>
				</view>
				<view class="Demandcontent">
					<text>{{info.need}}</text>
				</view>
			</view>
			<view class="VisitorInformation_list">
				<view class="">
					<view class="certificate">
						回访凭证
					</view>
					<view class="Voice_input">
						<view class="Image_box">
							<div class="box" v-for="(intem,index) in info.imgs" @click="clickImg(info.imgs,index)">
								<image :src="baseUrl+intem"  mode=""></image>
							</div>
							
						</view>
					
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="button">
			<u-button @click="show=true" class="cancel" type="primary" shape="circle" :plain="true" text="中止回访">
			</u-button>
			<!-- 终止回访内容弹框 -->
			<u-modal :show="show" :title="title" @confirm="stopReturn" confirmButtonShape="circle"
				confirmColor="#0C68FD" @close="close" :closeOnClickOverlay="true">
				<u--textarea v-model="query.stop_refuse" placeholder="中止原因" height="80">
				</u--textarea>
			</u-modal>
			<u-button class="fillin" shape="circle" text="填写回访记录" @click="tofillphone"></u-button>

		</view>
	</view>
</template>

<script>
	// import {
	// 	stopVisit,
	// 	visitDetail
	// } from '../../api/user.js'
	// import config from '@/api/config.js'
	export default {
		data() {
			return {
				// 终止弹框
				show: false,
				closeOnClickOverlay: false,
				title: '中止回访原因',
				// 图片
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				query: {
					villager_id: '',
					stop_refuse: '',
				},
				info: null,
			};
		},
		methods: {
			clickImg(imgs,index){
				let imgsArray = [];
					for (let i = 0; i < imgs.length; i++) {
						imgsArray.push(this.base+imgs[i]);
					}
					uni.previewImage({
						current: index,
						urls: imgsArray,
						indicator: 'number',
						loop: true
					});
				
			},
			stopReturn() {
				if (this.query.stop_refuse) {
					stopVisit(this.query).then(res => {
						this.show = false;
						uni.$u.toast(res.msg)
						uni.navigateBack({
							delta: -1
						})
					})
				} else {
					uni.$u.toast('请填写中止原因！')
				}
			},
			close() {
				this.closeOnClickOverlay = false;
			},
			rightClick() {
				uni.navigateTo({
					url: './Historical-return-visit'
				})
			},
			tofillphone() {
				uni.navigateTo({
					url: './Fill-in-the-content-phone'
				})
			},
			getVisitDetail() {
				visitDetail({
					villager_id: this.query.villager_id
				}).then(res => {
					console.log(res.data);
					this.info = res.data;
				})
			},
			init(query) {
				this.query.villager_id = query.villager_id;
				this.getVisitDetail();
			}
		},
		onLoad(query) {
			this.init(query)
		},
		filters: {
			sexType(val) {
				switch (val) {
					case 0:
						val = '女'
						break;
					case 1:
						val = '男'
						break;
				}
				return val
			},
			visitType(val) {
				switch (val) {
					case 1:
						val = '电话访问'
						break;
					case 2:
						val = '面访'
						break;
				}
				return val
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFF1F5;
	}
</style>

<style lang="scss">
	/* 上传图片 */
		.Voice_input{
			border-bottom: 1px solid rgba(215,215,215,0.50);
		}
		
		.Image_box{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 15px;
			padding-bottom: 15px;
		}
		
		.box{
			width: 205rpx;
			height: 205rpx;
			border: 1rpx solid #dedede;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box image{
			width: 100%;
			height: 100%;
		}
	//用户信息
	.indexbody {
		margin: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.indexbody_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			:first-child {
				font-weight: bold;
			}
		}

		.indexbody_content {
			background-color: #F8F8F8;
			margin: 10rpx 30rpx;
			padding: 10rpx;
			font-size: 24rpx;

			text {
				padding: 0 16rpx;
				border-right: 2rpx solid #333333;
			}

			:last-child {
				border-right: none;
			}
		}

		.indexbody_address {
			display: flex;
			margin: 20rpx 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 18rpx;
			}
		}

		.indexbody_phone {
			display: flex;
			justify-content: center;
			background-color: #F8FAFF;
			padding-bottom: 24rpx;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			padding: 10rpx 0;

			text {
				margin-right: 20rpx;
			}
		}
	}

	.visitor {
		margin-left: 30rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.VisitorInformation {
		margin: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom:280rpx;

		.VisitorInformation_list {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #EFF1F5;

			text:first-child {
				color: #666666;
			}

			text:last-child {
				color: #333333;
			}

			.VisitorInformation_list_image {
				margin: 30rpx 0 0 0;
				display: inline-block;
				padding-right: 20rpx;
			}

		}

	}

	.certificatee {
		display: block;
		width: 220rpx;
		vertical-align: middle;
	}

	.Demandcontent {
		padding-left: 40rpx;
		margin-right: -10rpx;
	}

	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.cancel {
		width: 240rpx;
	}

	.fillin {
		width: 240rpx;
		background-color: #0B66FD;
		color: #fff;
		padding-left: -60rpx;
	}

	// /deep/.u-modal__button-group{
	// 	background-color: #0B66FD;
	// 	color: #fff;
	// 	border-radius: 50px;
	// 	margin: 10px;
	// }
	// /deep/.u-modal__button-group__wrapper__text{
	// 	color: #fff;
	// }
</style>
